<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="../layui/css/layui.css" type="text/css">

</head>
<body style="background-color: #009688 !important;">
<div class="layui-layout layui-layout-admin">

    <div class="layui-header layui-bg-gray">

        <div class="layui-logo" style="font-size: 20px; color: #393D49; cursor: pointer" onclick="index()">作业查重系统教师端
        </div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="/teacher/personal" style="color: #393D49">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img"><span th:text="${current.realname}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/teacher/informs">发布通知</a></dd>
                    <dd><a href="/teacher/update">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a id="logout" href="javascript:;" style="color: #393D49">注销</a></li>
        </ul>
    </div>

    <div>
        <!-- 内容主体区域 -->
        <div style="width: 80%; margin:20px auto 20px auto">
            <div class="layui-row layui-col-space5 layui-bg-gray">
                <div class="layui-col-md12">
                    <div class="layui-row grid-demo">

                        <!-- 左侧内容 -->
                        <div class="layui-col-md7">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                <legend>最近通知</legend>
                            </fieldset>
                            <a href="/teacher/informs" style="float: right; color: #FF5722">>>查看更多</a>
                            <table id="informTable" class="layui-table" lay-filter="fileTable"></table>
                        </div>

                        <!-- 右侧内容 -->
                        <div class="layui-col-md5  grid-demo">
                            <fieldset class="layui-elem-field">
                                <legend>未批改</legend>
                                <div class="layui-field-box">
                                    <table id="fileTable" class="layui-table" lay-filter="informTable"></table>
<!--                                    <a href="javascript:;" style="float: right; color: #FF5722">>>查看更多</a>-->
                                </div>
                            </fieldset>
                            <fieldset class="layui-elem-field">
                                <legend>最近提交</legend>
                                <div class="layui-field-box">
                                    <table id="uploadTable" class="layui-table" lay-filter="uploadTable"></table>
<!--                                    <a href="javascript:;" style="float: right; color: #FF5722">>>查看更多</a>-->
                                </div>
                            </fieldset>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="position: relative;text-align: center;background-color: #eeeeee">
        <!-- 底部固定区域 -->
        © 2019-2020 alushu.xyz 版权所有 ICP证：<a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备20009324号</a>
    </div>

</div>

<!-- 模板 -->
<script type="text/html" id="typeTpl" th:inline="none">
    {{#  if(d.type === 1){ }}
    必修
    {{#  } else { }}
    选修
    {{#  } }}
</script>
<script type="text/html" id="statusTpl" th:inline="none">
    {{#  if(d.status === 0){ }}
    未查阅
    {{#  } else if(d.status === 1) { }}
    及格
    {{#  } else if(d.status === 2) { }}
    已查阅
    {{#  } else { }}
    未及格
    {{#  } }}
</script>

<!-- 方法 -->
<script src="../webjars/jquery/3.4.1/jquery.js"></script>
<script src="../layui/layui.js" type="text/javascript"></script>
<script th:inline="none">

    function index() {
        window.location = "/teacher/index"
    }

    $('#logout').click(function () {
        layer.confirm('确定退出系统吗', function () {
            window.location = "/logout";
        })
    });

    layui.use(['form', 'table', 'element'], function () {
        var form = layui.form
            , element = layui.element
            , table = layui.table;

        table.render({
            elem: '#fileTable'
            , url: '/teacher/recentWorks'
            , limit: 7
            , width: 450
            , skin: 'nob'
            , size: 'sm'
            , cols: [[
                {field: 'name', title: '文件名', unresize: true}
                , {field: 'updateTime', title: '修改日期', unresize: true}
                , {field: 'status', title: '状态', unresize: true, templet: '#statusTpl'}
                , {field: 'submitterName', title: '提交人', unresize: true}
            ]]
        });

        table.render({
            elem: '#informTable'
            , url: '/teacher/recentInform'
            , limit: 15
            , height: 'full-170'
            , page: {
                layout: ['prev', 'page', 'next', 'skip', 'count']
                , groups: 5
            }
            , cols: [[
                {field: 'content', title: '内容', unresize: true}
                , {field: 'date', title: '日期', unresize: true}
                , {field: 'type', title: '类型', width: 60, unresize: true, templet: '#typeTpl'}
            ]]
        });

        table.render({
            elem: '#uploadTable'
            , url: '/teacher/recentSubmit'
            , limit: 8
            , width: 450
            , skin: 'nob'
            , size: 'sm'
            , cols: [[
                {field: 'name', title: '文件名', unresize: true}
                , {field: 'updateTime', title: '提交时间', unresize: true}
                , {field: 'status', title: '状态', unresize: true, templet: '#statusTpl'}
                , {field: 'submitterName', title: '提交人', unresize: true}
            ]]
        });

        //监听行单击事件
        table.on('row(fileTable)', function (obj) {
            layer.alert(JSON.stringify(obj.data)) //得到当前行数据
        });

        //监听行单击事件
        table.on('row(informTable)', function (obj) {
            layer.alert(JSON.stringify(obj.data)) //得到当前行数据
        });

        //监听行单击事件
        table.on('row(uploadTable)', function (obj) {
            layer.alert(JSON.stringify(obj.data)) //得到当前行数据
        });

    });


</script>
</body>
</html>
